#orderBook {
  height: 100%;
  background: #181818;

  .order-book-container {
    position: relative;

    // &.mode-all {
    //   .order-book.asks,
    //   .order-book.bids {
    //     overflow: hidden;
    //   }
    // }
  }

  .order-book {
    box-sizing: content-box;

    &.asks,
    &.bids {
      display: flex;
      width: 100%;
      left: 0;
      height: 100%;
      overflow-y: scroll;
      overflow-x: hidden;
      transition: height ease 0.4s;

      .order-book-bar {
        right: 0;
      }
    }
    &.asks {
      flex-direction: column-reverse;

      .order-book-bar {
        // background: #4E3342;
      }
    }
    &.bids {
      flex-direction: column;

      .order-book-bar {
        // background: #255547;
      }
    }

    .order-book-row {
      height: 20px;
      line-height: 20px;
      position: relative;

      .order-book-row-content {
        height: 20px;
        line-height: 20px;
        display: flex;
        position: absolute;
        width: 100%;
        left: 0;
        z-index: 10;
      }


      &:not(.thead) {
        cursor: pointer;
      }
      &:not(.thead):hover {
        background: #292A2E;
      }

      .order-book-bar {
        position: absolute;
        height: 100%;
        z-index: 0;
      }
   
      .order-book-col {
        z-index: 1;
        box-sizing: border-box;
        overflow: hidden;

        &.price {
          width: 30%;
          text-align: right;
          margin-left: 6px;
          margin-right: 2px;
        }
        &.amount {
          width: 35%;
          text-align: right;
          margin: 0 2px;
        }
        &.total {
          width: 35%;
          text-align: right;
          margin-left: 2px;
          margin-right: 6px;
        }
      }
    }
  }
}

.cb-panel.orderBook-panel {
  height: 100px;
  margin-right: 2px;
  background: transparent;

  .slide-all {
    position: relative;
    width: 100%;
    height: 100%;

    i {
      position: absolute;
      top: 50%;
      left: 50%;
    }
    .slide-buy {
      transform: translate(-50%, -35%) rotate(-90deg) scale(0.75, 1);
    }
    .slide-sell {
      transform: translate(-50%, -65%) rotate(90deg) scale(0.75, 1);
    }
  }
  .slide-buy {
    transform: rotate(-90deg);
  }
  .slide-sell {
    transform: rotate(90deg);
  }

  .simple-btn {
    margin-left: 2px;
  }

  .simple-btn.deep {
    width: auto;
    padding: 0 5px;
  }
}

.cb-panel.orderBook-panel.loading {
  background: #181818;
}

@media (max-width: 875px) {
  .cb-panel.orderBook-panel {
    margin-right: 0;
  }

  #orderBook {
    .order-book .order-book-row .order-book-col.price,
    .order-book .order-book-row .order-book-col.amount {
      width: 50%;
    }
  }

  
  .m-show-trade {
    #orderBook .order-book-container.mode-all .order-book.asks {
      margin-bottom: 8px;
    }

    #orderBook .order-book-container.mode-all .order-book.bids, #orderBook .order-book-container.mode-all .order-book.asks {
      height: 48%;
    }

    .cb-panel.orderBook-panel {
      height: 500px;
    }
  }
}
